<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>休息娱乐</title>

    <style>
        /*figure{*/
            /*width: 500px;*/
        /*}*/
        video{
            width: 500px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/Rest.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.5.0.min.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrap">
    <!---个人博客--->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">我的个人博客</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar1">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="home.html"></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Blog_tech.html">博文技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="album.html">我的相册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Rest.html">休息娱乐</a>
                </li>
                <li class="nav-item" style="margin-left: 50px">
                    <a class="nav-link active" href="Rest.html">视频播放</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="SVGEditor.html">canvas画板</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="map.html">其他信息</a>
                </li>
            </ul>
        </div>
    </nav>

    <figure style="text-align: center">
        <figcaption style="margin: 10px;margin-left: -50px;font-weight: bold;font-size: 22px">Let it go！</figcaption>
        <video id="video" src="video/let-it-go.mp4" style="width: 800px;">
            <span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
        </video>
        <div>
            <progress id="progress" value="0" max="100" style="width: 450px"></progress>
            <span id="curTime">00:00</span>/<span id="totalTime">01:31</span>
        </div>
        <div>
            <button id="btn_play">播放</button>
            <button id="btn_pause">暂停</button>
            <button id="btn_muted">静音</button>
            <button id="btn_fullScreen">全屏</button>
            <input type="range" value='1' name="range" id="btn_volume" min="0" max="1" step='0.1'>
            <button id="btn_go">加速</button>
            <button id="btn_back">减速</button>
            <button id="go_five">快进5s</button>
            <button id="back_five">后退5s</button>
        </div>
    </figure>
    <!---页脚--->
    <div class="foot">
        <footer>Copyright@wangdeling</footer>
    </div>
</div>
</body>
<!--video-->
<script type="text/javascript">
    window.onload=function () {
        let video=document.getElementById("video");
        let btn_play = document.getElementById('btn_play');
        let btn_pause = document.getElementById('btn_pause');
        let btn_muted = document.getElementById('btn_muted');
        let btn_volume = document.getElementById('btn_volume');
        let btn_go = document.getElementById('btn_go');
        let btn_back = document.getElementById('btn_back');
        let go_five = document.getElementById('go_five');
        let back_five = document.getElementById('back_five');
        let pro = document.getElementById('progress');
        let curTimeSpan = document.getElementById("curTime");
        let totalTimeSpan=document.getElementById("totalTime");
        let btn_fullScreen = document.getElementById('btn_fullScreen');
        video.oncanplay=function(){
            let tss=Math.floor(video.duration/60);
            let tmm=Math.floor(video.duration%60);
            tss=tss<10?('0'+tss):tss;
            tmm=tmm<10?('0'+tmm):tmm;
            totalTimeSpan.innerHTML=tss+':'+tmm;
        }


        btn_play.disabled=false;
        btn_pause.disabled=true;
        btn_play.onclick=function () {
            video.play();
            btn_play.disabled=true;
            btn_pause.disabled=false;
        }
        btn_pause.onclick=function () {
            video.pause();
            btn_play.disabled=false;
            btn_pause.disabled=true;
        }

        btn_muted.onclick=function () {
            video.muted=!video.muted;
            btn_muted.innerHTML=video.muted?"取消静音":"静音";
        }

        btn_volume.onchange=function () {
            video.volume=btn_volume.value;
        }

        btn_go.onclick=function () {
            video.playbackRate += 0.1;
        }

        btn_back.onclick=function () {
            video.playbackRate-=0.1;
        }
        go_five.onclick=function () {
            video.currentTime+=5;
        }
        back_five.onclick=function () {
            video.currentTime-=5;
        }

        pro.onclick=function(event){
            let x=event.offsetX;
            let width=event.offsetWidth;
            video.currentTime=x/this.offsetWidth*video.duration;
        }

        video.ontimeupdate=function () {
            pro.value=video.currentTime/video.duration*100;
            let ss=Math.floor(video.currentTime/60);
            let mm=Math.floor(video.currentTime%60);
            ss=ss<10?('0'+ss):ss;
            mm=mm<10?('0'+mm):mm;
            curTimeSpan.innerHTML=ss+':'+mm;
        }

        btn_fullScreen.onclick=function () {
            fullScreen(video);
        }
    }

    function fullScreen(ele){
        if(ele.mozRequestFullScreen){
            ele.mozRequestFullScreen();//火狐浏览器
        }else if(ele.webkitRequestFullscreen){
            ele.webkitRequestFullscreen();//谷歌浏览器
        }else if(ele.oRequestFullscreen){
            ele.oRequestFullscreen(); //opera浏览器
        }else if(ele.msRequestFullscreen){
            ele.msRequestFullscreen();  //ie浏览器
        }else if(ele.requestFullscreen){
            ele.requestFullscreen();
        }
    }
</script>
</html>